﻿@model Marbale.BusinessObject.Cards.CardsModel
@{
    ViewBag.Title = "ViewCards";
}
<div>
    @using (Html.BeginForm("ViewCards", "Cards", FormMethod.Get))
    {
        <div>
            <div class="form-group row">
                <div class="col-md-2">
                    <label for="ex2"><b>CardNumber:</b></label>
                    @Html.TextBoxFor(m => m.CardNumber, new { @class = "form-control", placeholder = @Html.DisplayNameFor(n => n.CardNumber) })
                </div>

                <div class="col-md-2">
                    <label for="ex3"><b>IssueDate:</b></label>
                    @Html.TextBoxFor(m => m.IssueDate, new { @class = "form-control", data_select = "datepicker" })
                </div>
                <div class="col-md-2">
                    <label for="ex3"><b>To:</b></label>
                    @Html.TextBoxFor(m => m.ToDate, new { @class = "form-control", data_select = "datepicker" })
                </div>
                <div class="col-md-2">
                    <label for="ex4"><b>Customer Name:</b></label>
                    @Html.TextBoxFor(m => m.Customer, new { @class = "form-control" })
                </div>
                 <div class="col-md-1">
                    <label for="ex4"><b>VIP Customer:</b></label>
                    @Html.CheckBoxFor(m => m.VIPCustomer, new { @class = "form-control", @style = "position:absolute;width:20px;" })
                </div>
                <div class="col-md-1">
                    <label for="ex3"><b>Technician Card:</b></label>
                    @Html.CheckBoxFor(m => m.TechnicianCard, new { @class = "form-control", @style = "position:absolute;width:20px;" })
                </div>
                <div class="col-md-1">
                    <label for="ex3"><b>Valid Card:</b></label>
                    @Html.CheckBoxFor(m => m.TechnicianCard, new { @class = "form-control", @style = "position:absolute;width:20px;" })
                </div>

            </div>
            <input type="submit" name="submit" value="Search" class="btn btn-primary btn-md"/>
        </div>
    }
</div>
<div style="margin-top: 7px;">
    <table id="cardtable" class="table marbleTable">
        <thead>
            <th>CardId</th>
            <th></th>
            <th>CardNumber</th>
            <th>TechCardType</th>
            <th>IssueDate</th>

            <th>VIPCustomer</th>
            <th>TimerResetCard</th>
            <th>FaceValue</th>
            <th>Customer</th>
            <th>RefundDate</th>
            <th>LastUpdatedTime</th>
            <th>LastUpdatedBy</th>
            <th>RefundAmount</th>

            <th>Notes</th>
            <th>StartTime</th>
            <th>LastPlayTime</th>
            <th>TechGame</th>
     

            <th>Credits</th>
            <th>Credit Plus</th>
            <th>Courtesy</th>
            <th>Bonus</th>
            <th>CreditsPlayed</th>
            <th>TicketCount</th>
            <th>TicketAllowed</th>
            <th>RealTicketMode</th>



        </thead>
        @if (ViewBag.cardsDetails != null)
        {
            foreach (var item in ViewBag.cardsDetails)
            {  
            <tr onclick="UpdatedList(@item.CardId)">
                <td>@item.CardId  </td>
                  <td>
                     <a class="edit" title="Edit" data-toggle="tooltip" onclick="EditCard('@item.CardId')">
                         <i class="material-icons" style="cursor: pointer;">&#xE254;</i>
                     </a>
                     <a class="delete" title="Delete" data-toggle="tooltip" onclick="DeleteCard('@item.CardId')">
                         <i class="material-icons" style="cursor: pointer;">&#xE872;</i>
                     </a>
                </td>
                <td>
                    <input type="text" value="@item.CardNumber" />
                </td>
                <td>
                    <select name="TypeList" id="TypeList">
                        @foreach (var dow in (List<Marbale.BusinessObject.IdValue>)Session["TechCardType"])
                        {

                            if ((@item.TechCardType) ==  @dow.Id)
                            {
                            <option value="@dow.Value" selected>@dow.Value</option>
                            }
                            else
                            {
                            <option value="@dow.Value">@dow.Value</option>
                            }
                        }
                    </select>
                </td>

                <td>
                    <input type="text" value="@item.IssueDateP" />
                </td>
                <td>
                    <input type="checkbox"  @(item.VIPCustomer ? "checked='checked'" : "") value="@item.VIPCustomer" />
                </td>
                <td>
                    <input type="checkbox"  @(item.TimerResetCard ? "checked='checked'" : "") value="@item.TimerResetCard" />
                </td>
                <td>
                    <input type="text" value="@item.FaceValue" />
                </td>
                <td>
                    <input type="text" value="@item.Customer"/>
                </td>
                @*    <td>
                    <input type="text" value="@item.FaceValue"/>
                </td>*@

                <td>
                    <input type="text" value="@item.RefundDate"/>
                </td>
                <td>
                    <input type="text" value="@item.LastUpdatedTime"/>
                </td>
                <td>
                    <input type="text" value="@item.LastUpdatedBy"/>
                </td>
                <td>
                    <input type="text" value="@item.RefundAmount"/>
                </td>

                <td>
                    <input type="text" value="@item.Note"/>
                </td>
                <td>
                    <input type="text" value="@item.StartTime"/>
                </td>

                <td>
                    <input type="text" value="@item.LastPlayTime"/>
                </td>
                <td>
                    <input type="text" value="@item.TechGames"/>
                </td>
             


                <td>
                    <input type="text" value="@item.Credits"/>
                </td>
                <td>
                    <input type="text" value="@item.CreditPlus"/>
                </td>

                <td>
                    <input type="text" value="@item.Courtesy"/>
                </td>
                <td>
                    <input type="text" value="@item.Bonus"/>
                </td>
                <td>
                    <input type="text" value="@item.CreditsPlayed"/>
                </td>
                <td>
                    <input type="text" value="@item.TicketCount"/>
                </td>
                <td>
                    <input type="checkbox"  @(item.TicketAllowed ? "checked='checked'" : "") value="@item.TicketAllowed" />
                </td>
                <td>
                    <input type="checkbox"  @(item.RealTicketMode ? "checked='checked'" : "") value="@item.RealTicketMode" />
                </td>

            </tr>  
            }
        }
    </table>
</div>
<div class="action">
    <button id="newcard" class="btn btn-primary btn-md" role="button">New Card</button>
    <button class="btn btn-primary btn-md" role="button" onclick="history.back();" id="back">Back</button>
    <button class="btn btn-primary btn-md" role="button" onclick="location.href='/'">Close</button>
</div>

<script>
    $(function () {
        $("#ExpiryDate").datepicker({
            changeMonth: true,
            changeYear: true,
            "setDate": new Date()
        });
    });
    var table;
    $(document).ready(function () {
         table = $('#cardtable').DataTable({
            scrollY: "400px",
            scrollX: "400px",
            scrollCollapse: true,
            editable: true,
            stateSave: true,
            // paging: true,
            bPaginate: false,
            bInfo: false,
            bFilter: false,
            bSort: false,
            "createdRow": function (row, data, index) {
                $('td', row).addClass('tblRow');
            },
            rowCallback: function (row, data) {
                var element = $('td', row);
                element.on("change", function (e) {
                    UpdatedList($(this).parent().index());
                });
            },
            //order: [[ 0, "desc" ]],
            fixedColumns: {
                leftColumns: 3
            }
        });
        $('#marbleTable tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
        var counter = 1;

        $('#addRow').on('click', function () {
            $("#saveproduct").attr("disabled", false);
            var fixedcolumn1values = $('.DTFC_Cloned lable.fixedCol1');
            var fixedcolumn2values = $('.DTFC_Cloned input.fixedCol2');
            table.row.add([
                '<lable class="fixedCol1"></lable>',
                '',
                '<input class="fixedCol2" type="text" value="" />',
                '<select name="TypeList" id="TypeList">' + typeListOptions,
                '<select name="categoryList" id="categoryList">' + categoryListOptions,
                '<input type="text" value="" />',
                '<input type="checkbox" />',
                '<input type="checkbox" />',
                '<input type="text" value="" />',
                '<input type="checkbox" />',
                '<input type="checkbox" />',
                '<input type="text" value="" />',
                '<input type="text" value="" />',
                '<input type="checkbox" />',
                '<input type="text" value="" />',
                '<input type="text" value="" />',
                '<input type="text" value="" disabled/>',
                '<input type="text" value="" disabled/>',
            ]).draw(false);

            for (var i = 0, j = fixedcolumn1values.length; i < j; i++) {
                $('.DTFC_Cloned lable.fixedCol1')[i].innerHTML = fixedcolumn1values[i].innerHTML;
            }
            for (var i = 0, j = fixedcolumn2values.length; i < j; i++) {
                $('.DTFC_Cloned input.fixedCol2')[i].value = fixedcolumn2values[i].value;
            }
        });
        $(".tblRow").on("change", function (e) { UpdatedList($(this).parent().index()); });
    });

    $('#newcard').click(function () {
        $('#myModal').modal('show');
        $('#modelBody').css({
            'left': '-30%',
            'width': 900
        });
        $('#modelBody').load('/Cards/Cards');
    });
    function UpdatedList(x) {
        updatedArray = [];
        updatedArray.push(x);
    }
    $("#cardtable tr").click(function () {
        var selected = $(this).hasClass("highlight");
        $("#cardtable tr").removeClass("highlight");
        if (!selected)
            $(this).addClass("highlight");
    });
    function DeleteCard(id) {
        if (confirm('Are you sure you want to delete this from database?')) {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("DeleteCard", "Cards")',
                data: { Id: id },
                dataType: "json",
                success: function (data) {
                    location.reload();
                },
                error: function (e) {
                    alert(e);
                }
            });
        }

    }
    function EditCard(CardId) {
        $('#myModal').modal('show');
        $('#modelBody').css({
            'left': '-30%',
            'width': 900
        });
        $('#modelBody').load('/Cards/Cards', { "CardId": CardId });
    }

</script>
